<#include "/admin/common/layout/__mainlayout.html"> <#assign pageCss>
<link rel="stylesheet"
	href="${contextPath}/admin/assets/css/colorbox.css" />
</#assign> <#assign pageBreadCrumbs>
<li><a href="#">Other Pages</a></li>
<li class="active">相册列表</li>
</#assign> <#assign pageJavascript>
<script src="${contextPath}/admin/assets/js/jquery.colorbox.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {
		var $overflow = '';
		var colorbox_params = {
			rel : 'colorbox',
			reposition : true,
			scalePhotos : true,
			scrolling : false,
			previous : '<i class="ace-icon fa fa-arrow-left"></i>',
			next : '<i class="ace-icon fa fa-arrow-right"></i>',
			close : '&times;',
			current : '{current} of {total}',
			maxWidth : '100%',
			maxHeight : '100%',
			onOpen : function() {
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed : function() {
				document.body.style.overflow = $overflow;
			},
			onComplete : function() {
				$.colorbox.resize();
			}
		};

		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		$("#cboxLoadingGraphic").html(
				"<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon

		$(document).one('ajaxloadstart.page', function(e) {
			$('#colorbox, #cboxOverlay').remove();
		});
	})
</script>
</#assign> <@mainlayout pageBreadCrumbs=pageBreadCrumbs pageCss=pageCss currentMenu="galleryFlag"
pageJavascript=pageJavascript>

<!-- pageHeader BEGAIN -->
<div class="row">
	<div class="col-xs-12">
		<div class="page-header">
			<h1>
				Gallery <small> <i class="ace-icon fa fa-angle-double-right"></i>
					responsive photo gallery using colorbox
				</small>
			</h1>
		</div>
		<!-- pageHeader END -->

		<!-- pageContent BEGAIN -->
		<div>
			<ul class="ace-thumbnails clearfix">
				<!-- #section:pages/gallery -->
				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-1.jpg"
					title="Photo Title" data-rel="colorbox"> <img width="150"
						height="150" alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-1.jpg" />
				</a>

					<div class="tags">
						<span class="label-holder"> <span class="label label-info">breakfast</span>
						</span> <span class="label-holder"> <span
							class="label label-danger">fruits</span>
						</span> <span class="label-holder"> <span
							class="label label-success">toast</span>
						</span> <span class="label-holder"> <span
							class="label label-warning arrowed-in">diet</span>
						</span>
					</div>

					<div class="tools">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div></li>

				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-2.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-2.jpg" />
						<div class="text">
							<div class="inner">Sample Caption on Hover</div>
						</div>
				</a></li>

				<!-- /section:pages/gallery -->

				<!-- #section:pages/gallery.caption -->
				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-3.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-3.jpg" />
						<div class="text">
							<div class="inner">Sample Caption on Hover</div>
						</div>
				</a>

					<div class="tools tools-bottom">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div></li>

				<!-- /section:pages/gallery.caption -->
				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-4.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-4.jpg" />
						<div class="tags">
							<!-- #section:pages/gallery.tags -->
							<span class="label-holder"> <span
								class="label label-info arrowed">fountain</span>
							</span> <span class="label-holder"> <span
								class="label label-danger">recreation</span>
							</span>

							<!-- /section:pages/gallery.tags -->
						</div>
				</a>

					<div class="tools tools-top">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div></li>

				<li>
					<div>
						<img width="150" height="150" alt="150x150"
							src="${contextPath}/admin/assets/images/gallery/thumb-5.jpg" />
						<div class="text">
							<div class="inner">
								<span>Some Title!</span> <br /> <a
									href="${contextPath}/admin/assets/images/gallery/image-5.jpg"
									data-rel="colorbox"> <i class="ace-icon fa fa-search-plus"></i>
								</a> <a href="#"> <i class="ace-icon fa fa-user"></i>
								</a> <a href="#"> <i class="ace-icon fa fa-share"></i>
								</a>
							</div>
						</div>
					</div>
				</li>

				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-6.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-6.jpg" />
				</a>

					<div class="tools tools-right">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div></li>

				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-1.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-1.jpg" />
				</a>

					<div class="tools">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div></li>

				<li><a
					href="${contextPath}/admin/assets/images/gallery/image-2.jpg"
					data-rel="colorbox"> <img width="150" height="150"
						alt="150x150"
						src="${contextPath}/admin/assets/images/gallery/thumb-2.jpg" />
				</a> <!-- #section:pages/gallery.tools -->
					<div class="tools tools-top in">
						<a href="#"> <i class="ace-icon fa fa-link"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-pencil"></i>
						</a> <a href="#"> <i class="ace-icon fa fa-times red"></i>
						</a>
					</div> <!-- /section:pages/gallery.tools --></li>
			</ul>
		</div>
		<!-- pageContent END -->
	</div>
</div>
</@mainlayout>
